@import '../../mixins';

#changes-list {
  min-height: 0;
}

/** A React component holding the currently selected repository's changes */
.changes-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .stashed-changes-button {
    @include ellipsis;
    min-height: 29px;

    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0 var(--spacing);
    width: 100%;

    // Chrome on Windows ignores the body element
    // font-family and uses Arial so we redefine
    // it here
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);

    padding: 0 var(--spacing);

    color: var(--secondary-button-text-color);
    background-color: var(--secondary-button-background);

    border: none;
    border-top: var(--base-border);
    box-shadow: none;
    z-index: 0;

    &:disabled {
      opacity: 0.6;
    }

    &:hover,
    &:focus {
      background-color: var(--secondary-button-hover-background);
      background: var(--box-selected-background-color);
    }
    &.selected,
    &.selected:hover {
      color: var(--box-selected-active-text-color);
      background-color: var(--box-selected-active-background-color);
      .stack-icon {
        fill: var(--box-selected-active-text-color);
      }
    }

    .stack-icon {
      fill: var(--color-modified);
    }

    .text {
      flex-grow: 1;
      margin: 0 var(--spacing-half);
      text-align: start;
    }

    .octicon {
      flex-shrink: 0;
    }
  }

  .header {
    background: var(--box-alt-background-color);
    border-bottom: 1px solid var(--box-border-color);
    padding: 0 var(--spacing);
    height: 29px;
    flex: 0 0 auto;

    .checkbox-component {
      align-items: center;
      height: 100%;
      position: relative;

      // We want the label to be positioned center with regards to the entire
      // header so we position it absolute in relation to the checkbox component
      // and give it a 100% width with padding on each side as to balance it out
      // while still providing enough space for the checkbox.
      label {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0 30px;
        text-align: center;

        @include ellipsis;
      }

      input[type='checkbox'] {
        flex-grow: 0;
        flex-shrink: 0;
      }
    }
  }
}

.undo-enter {
  max-height: 0;
  overflow: hidden;
}

.undo-enter.undo-enter-active {
  // It doesn't really matter what `maxHeight` we set here so long as it's
  // greater than or equal to the height that `UndoCommit` will want.
  max-height: 200px;

  transition: max-height var(--undo-animation-duration) ease-in;
}

.undo-exit {
  max-height: 200px;
}

.undo-exit.undo-exit-active {
  max-height: 0;

  transition: max-height var(--undo-animation-duration) ease-out;
}
